{% extends "templates/panoptic_base.html" %}

{% block title %}Panoptic - FRT Tracker{% endblock %}

{% block script %}
<script>
	window.state_wise_frt = {{ state_wise_frt }};
	window.state_routes = {{ state_routes }};
	window.current_state = null;
	document.addEventListener('DOMContentLoaded', () => {
		let current_view = "Map"
		let toggle_button = document.getElementById("view-states-list");
		let map = document.getElementById("chartdiv");
		let state = document.getElementById("state-list");
		toggle_button.onclick = () => {
			if (current_view == "Map") {
				// Hide Map
				map.classList.add("hidden");

				// Show States
				state.classList.remove("hidden");
				current_view = "State";
				toggle_button.innerHTML = "View Map";
			} else if (current_view == "State") {
				// Hide States
				state.classList.add("hidden");

				// Show Map
				map.classList.remove("hidden");
				toggle_button.innerHTML = "View States List";
				current_view = "Map";
			}
		};
	})
</script>
<script src="https://cdn.amcharts.com/lib/4/core.js"></script>
<script src="https://cdn.amcharts.com/lib/4/maps.js"></script>
<script src="https://cdn.amcharts.com/lib/4/geodata/data/countries2.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/material.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="/assets/panoptic/js/india_map.js?ver=2"></script>
{% endblock %}

{% block content %}
<section class="container">
	{{ web_block(
		"Title Section",
		values={
			"title": "<span class='text-white'>Facial Recognition Systems in</span> India",
			"button_label": "View States List",
			"button_id": "view-states-list",
		},
		add_container=0,
		add_top_padding=0,
		add_bottom_padding=0,
	) }}
	<div class="flex flex-wrap">
		<div class="w-full md:w-2/3 border-r border-l border-b md:border-b-0">
			<div id="chartdiv" class="h-screen md:h-full block p-5 md:p-8 lg:p-12 -mb-12" style="min-height: 450px;">
			</div>
			<div id="state-list" class="flex flex-wrap hidden">
				{% for state, route in state_name_routes.items() %}
				<a href="/{{route}}" class="hover:bg-teal-blue-600 w-full md:w-1/2 flex items-center border-r border-b">
					<div class="m-6 truncate">
						{{ state }}
					</div>
				</a>
				{% endfor %}
			</div>
			<!-- <img style="max-height: 600px;" src="/assets/panoptic/images/demo-map.svg"> -->
		</div>
		<div class="w-full md:w-1/3 border-r flex flex-col justify-start">
			<div class="h-100 text-center border-l md:border-l-0 border-b hover:bg-teal-blue-600">
				<a href="/central" class="text-orange-500 font-bold hover:bg-teal-blue-600">
					<div class="m-6 truncate">
						View Central Level Projects
					</div>
				</a>
			</div>
			{{ web_block(
				"Stats Column",
				values={
					"stats": {
						"FRT Systems Installed": total_frt,
						"RTIs Filed": total_rtis,
						"Total Financial Outlay</p><p class='text-sm text-teal-blue-300'>* Estimates based on available information</p>": total_cost
					}
				},
				add_container=0,
				add_top_padding=0,
				add_bottom_padding=0,
			) }}
			<div class="p-5 md:px-8 lg:p-12 bg-panoptic-blue-500 hidden lg:block">
				<h2 class="text-white">
					Facial Recognition Systems Tracker
				</h2>
				<p class="mt-3">
					Browse through our breathing database of all the FRT systems installed in India by different
					authorities.
				</p>
				<div class="flex my-4 pr-12 flex items-center">
					Hover over the states to dig deeper.
				</div>
			</div>
		</div>
	</div>
</section>
<section class="container bg-panoptic-blue-500 border">
	<div class="max-w-4xl flex flex-wrap mx-auto p-5 md:py-8 lg:py-12">
		<div class="w-full md:w-1/3 pr-12">
			<h1 class="text-3xl leading-tight md:leading-snug md:text-4xl text-orange-500">Why are we talking about
				Facial Recognition?
			</h1>
		</div>
		<div class="w-full md:w-2/3 prose prose-md text-white mt-5 md:mt-0">
			<p>
				Facial recognition technology (FRT) uses algorithms to extract data points from your face to create a
				digital
				signature of your face. This signature is then compared with an existing database to find possible
				matches. However, 100% accuracy in finding matches has not been achieved and thus this technology comes
				with the harms of misidentification (false positive) and failure to identify (false negative). In
				addition to inaccuracy, this technology also poses huge threats to the fundamental rights to privacy and
				freedom of speech and expression. Still use of this technology has been increasing gradually as multiple
				government facial recognition projects are developed and deployed across the country as can be seen in
				the tracker above.
			</p>
		</div>
	</div>
</section>
{% endblock %}